設計大綱

設計CTA的用意一方面是讓結尾不會來得太突然，另一方面是想在網頁的最後再來一個「Call To Action」。

由於上面已經有蠻多不同樣式的設計區塊了，所以CTA就簡單帶個標題、email的input就好！CTA一樣會是以滿版的方式去設計，背景顏色會使用Primary (#9B3C05)，文案顏色則會使用Secondary (#FDFCFC)。

Grid System的分配方面，左方會是標題，右方會是Input。這邊還是要再提醒一下大家：「記得不管目前文案字數為多少，都要多留位置唷！」，因為你不會知道你＊8主管或是G＊客戶會不會突然說要多加字或是什麼的（xxxxxxxx）。所以，這邊的分配將會是「標題佔6欄，Input佔6欄」。

步驟

滿版背景

1. 在畫布上畫出一個滿版寬的長方形，高度先不用管
2. 顏色為Primary (#9B3C05)
   

標題

1. 文字框出6欄寬，並輸入標題文案
2. 調整文字顏色為Secondary (#FDFCFC)
3. 調整文字大小為24px
4. 調整文字字重為Normal
   

Input

1. 畫出只有Border的長方形，寬度先調整成佔4欄寬（因為目前不知道Button會佔多少）
2. 調整Border顏色為Secondary (#FDFCFC)
3. 在input內輸入placeholder的文字
4. 調整placeholder的樣式
   • 文字大小：16px
   • 文字字重：Regular
   • 文字顏色：Secondary (#FDFCFC)、60%透明度
     
5. 調整placeholder的Margin-y為12px、Margin-left為24px
6. 這時候Input的高度就出來了?

Button

1. 因為為了統一，所以整個網頁的Button樣式都會一樣（顏色可以變，但Padding最好不要），所以這邊先把上面的Button複製貼上
2. 調整Button的文字顏色為Primary (#9B3C05)
3. 調整Button與左邊Input的間距為16px，這樣左邊的Input長度就出來了＊這邊的input與button之間沒有完全對齊Grid System是允許的，因為它們的外面已經有對齊col-6了，因此裡面就不用了喔！
   

調整間距

1. 把標題、input、button群組起來
2. 上下間距 96px就可以了
   

結論

因為已經到了設計的倒數第二個區塊了，所以要用到的技巧都是之前有提到過的東西，但這邊還是會再三強調要注意如何對齊Grid System，以及空間分配唷！
那明天再來設計最後一個區塊吧！